(
    function() {
        // 获取数据
        var list_class = document.querySelector('#excellent_class'); //放li的大盒子

        var xk = document.getElementById('xk'); //排序模块
        var span = xk.querySelectorAll('span'); //所有的span
        // var xk_zong = xk.querySelector('.xk_zh'); //综合排序模块
        // var xk_xl = xk.querySelector('.xk_xp'); //销量
        // var xk_xp = xk.querySelector('.xk_xp'); // 新品
        // var xk_jg = xk.querySelector('xk_jg'); //价格
        var jgqj = xk.querySelector('.jgqj a'); // 价格区间
        var qj = xk.querySelector('.jgqj .qj'); //  区间下面 的  白色 模块

        var gk = document.querySelectorAll('.mfkc'); //免费观看模块 和 付费观看模块


        var arr;
        // ajax获取后台数据
        U.ajax('get', './data/movelist.json', null, function(data) {
            arr = JSON.parse(data); //将数据装入arr
            // 只要  数据  存到  arr  就   传入   view函数   
            view(arr);

        })

        //  排序好   arr  直接   传参    就可以   变化顺序
        function view(arr) {
            list_class.innerHTML = '';
            for (var i = 0; i < arr.length; i++) {
                var d = arr[i];
                var li = document.createElement('li');
                li.innerHTML = `   
                <dl>
                <dt>
                    <a href="${d.href}" target="_blank">
                        <img src= "${d.img}"
                            width="100%" alt="" title="${d.title}">
                    </a>
                </dt>
                <dd>
                    <a href="{d.href}" title="${d.title}" target="_blank">${d.title}</a>
                    <p>
                        <span>共有${d.count}人在学</span>
                        <em>|</em>
                        <span class="${d.price ?' orange' : 'green'}">${d.price ? "￥"+d.price.toFixed(2) : d.type}</span>
                    </p>    
                </dd>
                </dl> `;

                U.append(list_class, li)

            }




        }

        //    给所有的span添加点击事件
        for (var i = 0; i < span.length; i++) {

            span[i].onclick = function() {

                //   清除所有的类名
                for (let i = 0; i < span.length; i++) {
                    U.removeClass(span[i], 'active')
                }
                // 给点击的span 添加  类名
                U.addClass(this, 'active')


                // 获取当前自定义属性的名字
                var type = this.getAttribute('data_type');
                // 利用属性名字进行相应的操作
                var newArr = [...arr]; //利用es6解构  来 克隆数组             
                switch (type) {

                    case 'zh':
                        view(newArr);
                        break;
                    case 'count':
                        newArr = newArr.sort(function(a, b) {
                            return b.count - a.count;
                        })
                        view(newArr);
                        break;
                    case 'new':
                        newArr = newArr.sort(function(a, b) {
                            // 转换时间戳
                            return Date.parse(b.data) - Date.parse(a.data);
                        })
                        view(newArr);
                        break;

                    case 'price':
                        var _this = this;
                        var tag = this.getAttribute('tag');
                        newArr = newArr.sort(function(a, b) {
                            if (tag === 'up') {
                                _this.setAttribute('tag', 'down')
                                U.addClass(_this, 'xk_jg1')
                                U.removeClass(_this, 'xk_jg2')
                                return a.price - b.price
                            } else {
                                _this.setAttribute('tag', 'up')
                                U.addClass(_this, 'xk_jg2')
                                U.removeClass(_this, 'xk_jg1')
                                return b.price - a.price
                            }
                        })
                        view(newArr);
                        break;

                }

            }
        }


        // /免费观看模块 和 付费观看模块

        for (var i = 0; i < gk.length; i++) {
            gk[i].onclick = function() {

                var that = this;
                // 去掉原来的属性
                for (let i = 0; i < gk.length; i++) {
                    U.removeClass(gk[i], 'active')
                }

                U.addClass(this, 'active')


                var arrNew = [...arr]; //克隆一个新的
                // 整一个新数组
                var arr1 = [];
                var type = this.getAttribute('type');

                switch (type) {
                    case 'mf':
                        for (var i = 0; i < arrNew.length; i++) {
                            if (arrNew[i].type == '免费') {
                                arr1.push(arrNew[i]);
                            }
                        }
                        view(arr1)
                        break;

                    case 'ff':
                        for (var i = 0; i < arrNew.length; i++) {
                            if (arrNew[i].type == '付费') {
                                arr1.push(arrNew[i]);
                            }
                        }
                        view(arr1)
                        break;
                }


            }
        }



    }
)()